<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="repository">Repository</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a repository" formControlName="repository"
        id="repository" (ngModelChange)="repositoryChange($event)">
        <ng-container *ngFor="let entry of repositories | keyvalue">
          <nz-option *ngFor="let repo of entry.value" [nzLabel]="entry.key+'/'+repo.name"
            [nzValue]="entry.key+'/'+repo.name"></nz-option>
        </ng-container>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="ref">Ref</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <app-repository-ref-select [branches]="branches" [tags]="tags" formControlName="ref" id="ref"
        placeHolder="Select a ref" (ngModelChange)="refChange($event)"></app-repository-ref-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="workflow">Workflow</nz-form-label>
    <nz-form-control [nzSpan]="14" [nzValidateStatus]="noWorkflowFound ? 'warning' : null"
      nzWarningTip="No workflow found for the current branch, fallback on the default one.">
      <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a workflow" formControlName="workflow" id="workflow"
        (ngModelChange)="workflowChange($event)">
        <nz-option *ngFor="let workflow of workflows" [nzLabel]="workflow" [nzValue]="workflow"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item *ngIf="this.validateForm.controls.sourceRepository.value">
    <nz-form-label [nzSpan]="6" nzFor="sourceRepository">Source repository</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <input formControlName="sourceRepository" nz-input type="text" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item *ngIf="this.validateForm.controls.sourceRepository.value">
    <nz-form-label [nzSpan]="6" nzFor="sourceRef">Source ref</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <app-repository-ref-select [branches]="sourceBranches" [tags]="sourceTags" formControlName="sourceRef"
        placeHolder="Select a ref" id="sourceRef"></app-repository-ref-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item *ngIf="!event">
    <nz-form-control [nzSpan]="12" [nzOffset]="6">
      <button nz-button nzType="primary" [disabled]="!validateForm.valid" [nzLoading]="isLoading()">Start</button>
    </nz-form-control>
  </nz-form-item>
</form>

<nz-result *ngIf="event && (event.status !== 'Done' && event.status !== 'Error')" [nzIcon]="iconTemplate"
  nzTitle="Workflow run triggered!" [nzSubTitle]="subTitle">
  <ng-template #iconTemplate>
    <span nz-icon nzType="loading" nzTheme="outline"></span>
  </ng-template>
  <ng-template #subTitle>
    <div class="message">
      <b>Event ID:</b><span nz-typography nzCopyable [nzCopyTooltips]="null" nzContent="{{event.uuid}}"></span><br />
      <b>Status:</b> {{event?.status}}
    </div>
  </ng-template>
</nz-result>

<nz-result *ngIf="event && event.status === 'Error'" nzStatus="error" nzTitle="Error starting Workflow Run!"
  [nzSubTitle]="subTitle">
  <ng-template #subTitle>
    <div class="message">
      <b>Event ID:</b><span nz-typography nzCopyable [nzCopyTooltips]="null" nzContent="{{event.uuid}}"></span><br />
      <b>Last error:</b>
      <pre>{{event.last_error}}</pre>
    </div>
  </ng-template>
  <div nz-result-extra>
    <button nz-button (click)="clearForm()">Clear</button>
  </div>
</nz-result>

<nz-result *ngIf="event && event.status === 'Done'" nzStatus="success"
  nzTitle="Successfully started a new Workflow Run!" [nzSubTitle]="subTitle">
  <ng-template #subTitle>
    <div class="message">
      <b>Event ID:</b><span nz-typography nzCopyable [nzCopyTooltips]="null" nzContent="{{event.uuid}}"></span><br />
      <b>Run ID:</b><span nz-typography nzCopyable [nzCopyTooltips]="null"
        nzContent="{{event.workflows[0].run_id}}"></span>
    </div>
  </ng-template>
  <div nz-result-extra>
    <a nz-button nzType="primary" [routerLink]="['/', 'project', this.project.key, 'run', event.workflows[0].run_id]"
      (click)="close()">Go
      to Run</a>
    <button nz-button (click)="clearForm()">Clear</button>
  </div>
</nz-result>